<template>
  <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
  <hr>
  <el-radio-group v-model="radio1">
      <el-radio value="1" size="large">Option 1</el-radio>
      <el-radio value="2" size="large">Option 22</el-radio>
    </el-radio-group>
    {{ radio1 }}
    <hr>
    <el-radio-group v-model="radio2" size="large">
      <el-radio-button label="New York" value="New York" />
      <el-radio-button label="Washington" value="Washington" />
      <el-radio-button label="Los Angeles" value="Los Angeles" />
      <el-radio-button label="Chicago" value="Chicago" />
    </el-radio-group>
    {{ radio2 }}
    <hr>
    <el-select
      v-model="s1"
      placeholder="Select"
      size="large"
      style="width: 240px"
    >
    <el-option
        label="1"
        value="apple"
      />
      <el-option
        label="2"
        value="appl2e"
      />
      <el-option
        label="3"
        value="apple3"
      />
    </el-select>
    {{ s1 }}
</template>

<script setup>
import { ref } from 'vue'

const num = ref(1)
const handleChange = value => {
  console.log(value)
}

const radio1 = ref('2');
const radio2 = ref('Los Angeles');
const s1 = ref('2');


</script>